<template>
  <main class="book-types">
    <nav>
      <div class="nav-item" v-for="(item,index) in nav_category" v-bind:class="{'nav-item-select':nav_select === index}" @click="selectNav(index)">
        {{item.category_name}}
      </div>
    </nav>
    <section v-if="book_list.length > 0">
      <BookListLoad :book_list="book_list" :is_vip='is_vip' @selectBook = "selectBook" v-if="showBooks"></BookListLoad>
    </section>
    <div class="null" v-if="book_list.length === 0">
      <div class="contens">
        <div><i class="iconfont icon-wodeshuji-kongbaiye"></i></div>
        <div>该书单下还未有任何书籍哦</div>
      </div>
    </div>
    <!--<InfiniteLoading @infinite='infiniteHandler' ref="infiniteLoading" force-use-infinite-wrapper="true">-->
    <!--<span slot="no-results">-->

    <!--</span>-->
    <!--<span slot="no-more">-->

    <!--</span>-->
    <!--</InfiniteLoading>-->
  </main>
</template>

<script>
    import BookListLoad from '../../components/BookListLoad/Index'
    import InfiniteLoading from 'vue-infinite-loading';
    export default {
        name: "index",
        data:function () {
          return{
            is_vip:window.sessionStorage.getItem('ten_is_vip'),
            loadingPass:false,
            showBooks:false,
            //分类书籍页数
            category_page_index:1,
            // 书籍页数
            book_page_index:1,
            nav_category:[],
            book_list:[],
            nav_select:0
          }
        },
      mounted:function(){
        this.getCategoryList()
      },
      methods:{
        // 分类选择
        selectNav:function (nav_select) {
          // 如果点击的是自己不做任何操作
          if(nav_select === this.nav_select){
            return
          }
          this.showBooks = false
          // 清空书籍列表
          this.book_list = []
          this.book_page_index = 1
          this.nav_select = nav_select
          // 查询书籍分类
          this.getCategoryBooks(nav_select)
        },
        // 选择书籍回调
        selectBook:function (item) {
          this.$router.push({
            name: 'Chapter',
            query: {
              book_id: item.book_id,
              platform_book_id:item.platform_book_id,
              recommend_type:2
            }
          })
        },
        // 调用获取分类的接口
        getCategoryList:function () {
          this.$axios.category_list({
            params:{
              parent_id:-1,
              page_index:this.category_page_index,
              user_token:this.$Login.oauth_token.user_token
            }
          }).then(res=>{
            if(res.data.qing_code ===303){
              // 没有分类名称则结束递归
              this.getCategoryBooks(0)
              return this.book_list.length
            }else{
              this.nav_category = this.nav_category.concat(res.data.qing_data.categories)
              // 将第一页书籍放入首页显示
              if(res.data.qing_data.books){
                this.book_list = this.book_list.concat(res.data.qing_data.books)
                // 书籍页数自增
                this.book_page_index++
              }
              // 自增页数
              this.category_page_index++
              this.getCategoryList()
            }
          })
        },
        // 调用获取书籍列表的接口
        getCategoryBooks:function(nav_select){
          // 查询书籍分类
          this.$axios.category_book({
            params:{
              category_id:this.nav_category[nav_select].category_id,
              page_index:this.book_page_index,
              user_token:this.$Login.oauth_token.user_token
            }
          }).then(res=>{
            if(res.data.qing_code ===303){
              this.showBooks = true
              return
            }else{
              this.book_list = this.book_list.concat(res.data.qing_data)
              this.book_page_index++
              this.getCategoryBooks(nav_select)
            }
          })
        }
      },
      components:{BookListLoad,InfiniteLoading}
    }
</script>

<style scoped>
  @import "../../assets/css/views/booktypes/index.css";
</style>
